<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
		<link href="resources/css/mui.min.css" rel="stylesheet" />
		<link href="resources/css/common1.css" rel="stylesheet" />
		<link href="resources/css/swiper.css" rel="stylesheet" />
		<script src="resources/js/swiper.js"></script>
		<script src="resources/js/jquery-1.10.1.min.js"></script>
		<script src="resources/js/WebViewJavascriptBridge.js"></script>
		<script src="resources/js/common.js"></script>
		<script src="resources/js/vue.min.js"></script>
		<title>现金雷达 - 社区</title>
		<style>
			.header{width: 100%; position: fixed;    z-index: 9; top:0px; height: 40px; line-height: 40px; background-color: #2487ff;  color: #fff;}
		    .header p{text-align: center;}
		    .header .active{font-size: 16px;}
		    .swiper-container {width: 100%;		      height: auto;		      margin-left: auto;		      margin-right: auto;		    }
		    .swiper-slide {	text-align: center;		      font-size: 18px;		      background: #fff;		      margin-right: 2px !important;		      display: -webkit-box;		      display: -ms-flexbox;		      display: -webkit-flex;		      display: flex;		      -webkit-box-pack: center;		      -ms-flex-pack: center;		      -webkit-justify-content: center;		      justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
		    .swiper-slide img{width: 100%; height: auto;}
		
			.headerMsg{width: 10%; height: 60px; float: left; text-align: right;}
			.headerMsg img{width: 28px;  margin-top: 16px;}
			.listLogo{background-color: #fff; padding-top: 10px;}
			.listLogo img{width: 60%;}
			.listLogo .mui-row{ text-align: center; border-bottom: 1px solid #eee;}
			.newTit2{margin-bottom: 0px;}
			.newTit2 span{font-size: 12px;  color: #6c747d; padding: 2px 3px; margin-right: 15px;}
			.moreTit{margin-right: 30px; font-size: 12px; margin-top: 1px;}
			.newTit{margin-right: 15px; font-size: 12px; margin-top: 1px;}
			.newDeail{text-align: center; padding: 8px 0px;}
			.newDeail p{ margin-bottom: 0px; height: 20px;}
			.hotTit img, .newImg{border-radius: 3px;}
			.headerTop{ height: 40px;}
			.swiper-pagination{color: #FFFFFF; text-align: right; padding-right: 10px;    bottom: 0px;}	
			.swiper-pagination span{color: #FFFFFF;}	
			.mui-content>.mui-table-view:first-child{margin-top: 0px;}
			.ellipsis2{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical; height: 36px; line-height: 18px; font-size: 13px; -webkit-line-clamp:2;  }
			.listUl{width: 100%; padding: 10px; background-color: #FFFFFF; }
			.liList{position: relative; padding: 10px 0px; border-top:1px solid #EFEFEF;}
			.liList:first-child{border-top:0px;}
			.liListTit{width: calc(100% - 90px);}
			.liListImg{width: 70px; max-height: 60px; position: absolute; right: 0px; top:10px;}
			.bannerTit{margin-top: -22px; width: calc(100% - 80px);overflow: hidden;text-overflow:ellipsis;white-space: nowrap; position: absolute; padding-left: 10px; z-index: 9;  color: #FFFFFF;}
		
			.titImgBox img{ width: 100%; height: auto; margin-top: 1px;}
			
			
		</style>
		
		
	</head>

	<body>
	<div id="app">
		<div class="mui-content header" >
		    <div class="mui-row">
		        <div class="mui-col-sm-3 mui-col-xs-3">
	                <a >
	                    <p class="colorf active selectType1" @click="selectType(1)">新闻资讯</p>
	                </a>
		        </div>
		        <div class="mui-col-sm-3 mui-col-xs-3">
	                <a >
	                    <p class="colorf selectType2"  @click="selectType(2)">问答</p>
	                </a>
		        </div>
		        <div class="mui-col-sm-3 mui-col-xs-3">
	                <a >
	                    <p class="colorf selectType3" @click="selectType(3)">贷款技巧</p>
	                </a>
		        </div>
		    </div>  
		</div> 
		
		
		<div class="headerTop"></div>
		<div class="titImgBox">
			<img src="resources/images/1.jpg">
		</div>
		<!-- <div class="swiper-container swiper-container-horizontal">
			<div class="swiper-wrapper"> 
				<div class="swiper-slide"><img src="resources/images/newsBanner.png"></div>
				<div class="swiper-slide"><img src="resources/images/newsBanner.png"></div>
				<div class="swiper-slide"><img src="resources/images/newsBanner.png"></div>
			</div>
			<p class="bannerTit">想要贷款又快又多？这些你要知道</p>
			<div class="swiper-pagination"></div>
		</div> -->
		
		<div class="mui-content">
			<ul class="listUl">
				<li class="liList"  v-for="notice in noticeList.content">
					<a  :href="'newsDetails.html?id='+notice.id">
						<div class="liListTit">
							<div class='ellipsis2'>{{notice.title}}</div>
							<p class='mui-ellipsis newTit2'><span>{{notice.timeCreatedStr}}</span><span>{{notice.viewCount}}浏览</span></p>
						</div>
						<img class="liListImg newImg" :src="notice.coverImg">
					</a>
				</li>
				
			</ul>
		</div>
		
		<!-- <div class="mui-row tabBarBox" >
			<li class="fontS14" onclick="tabBar1()">
                <img src="resources/images/tab-bar1.png"> <br> 首页
	        </li>
  	        <li class="fontS14" onclick="tabBar2()">
                <img src="resources/images/tab-bar2.png"> <br>贷款
	        </li>
	        <li class="active fontS14" onclick="tabBar3()">
	            <img src="resources/images/tab-bar31.png">  <br>社区
	        </li>
			<li class="fontS14" onclick="tabBar4()">
                <img src="resources/images/tab-bar4.png"> <br>我的
			</li>
			
		</div>
		<div class="tabBarBottom"></div> -->
		</div>	
		<script>
		//调接口必传 格式
		 var header={
		     	app_version:'1.1.1',
		     	app_model:'ios',
		     	token:'066995456465562'
		     }
		 
		 	var body= "";
		 	var model ="";
		 	var jdata="";	
		 	body={
		 		type:1,
		    }
			var vm = new Vue({
			el : '#app',
			data : {
				noticeList:{}
			},
			created : function() {
				this.init();
			},
			methods : {
				init : function(){
					model={
				    	body:body,
				    	header:header,
				    }
				    jdata=JSON.stringify(model);
					var that=this;
					$.ajax({
						url: 'notice/getList',
						method: 'get',
						data:{
							'data':jdata
						},
						success: function(data){
							var json=JSON.parse(data);
							that.noticeList = json.data; 
						},
						error: function(){
							/* alert("数据加载异常!"); */
						}
					});
				},
				selectType : function(e){
					body.type = e;
					this.init();
					if(e=="1"){
						$(".titImgBox img").attr("src","resources/images/1.jpg")
						$(".selectType1").addClass("active");
						$(".selectType2").removeClass("active");
						$(".selectType3").removeClass("active");
					}else if(e=="2"){
						$(".titImgBox img").attr("src","resources/images/2.jpg")
						$(".selectType2").addClass("active");
						$(".selectType1").removeClass("active");
						$(".selectType3").removeClass("active");
					}else if(e=="3"){
						$(".titImgBox img").attr("src","resources/images/3.jpg")
						$(".selectType3").addClass("active");
						$(".selectType1").removeClass("active");
						$(".selectType2").removeClass("active");
					}
				
				}
			},
			filters : {
				
			}
		})
			
	   var swiper = new Swiper('.swiper-container', {
	   	slidesPerView: 1,
	 	spaceBetween: 2,
			pagination: {
				el: '.swiper-pagination',
				type: 'fraction',
				autoplay: 1000,
				speed: 100
				
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		});
			    
			  
		</script>		
	</body>

</html>